<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    li {
        color: blue;
        height: 30px;
        width: 600px;
        cursor: pointer;
    }
    li:hover {color: #eb7350}
    li:active {color: #2D93CA}
    select {
        height: 40px;
        width: 230px;
        /*border: 1px solid;*/
        font-size: 20px;
    }
    button {
        height: 40px;
        width: 120px;
        font-size: 18px;
    }
</style>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<div id="app">
    <div>
        <select v-on:change="indexSelect" placeholder="请选择……" >
            <option>请选择……</option>
            <option v-for="project in projects" :value="project.ips + '|' + project.name" :key="project.name">
                {{ project.name }}
            </option>
        </select>
        <select v-model="ip" placeholder="请选择……">
            <option v-for="ip in ips">
                {{ ip }}
            </option>
        </select>
        <button @click="getFiles" :disabled="ip ? false : true">
            确定
        </button>
    </div>
    <ol>
        <li v-for="log in logs" @click="getLog(log)">
            {{ log }}
        </li>
    </ol>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            logs: [],
            projects: [
                {'name': 'marketing-server', 'ips': '172.17.184.138'},
                {'name': 'account-server', 'ips': '172.17.184.138'},
                {'name': 'classes-server', 'ips': '172.17.184.138'},
                {'name': 'authenticate-server', 'ips': '172.17.184.138'},
                {'name': 'integral-server', 'ips': '172.17.184.138'},
                {'name': 'basics-server', 'ips': '172.17.184.138'},
                {'name': 'basics-resource-server', 'ips': '172.17.184.138'},
                {'name': 'gateway-zuul-server', 'ips': '172.17.184.138'},
                {'name': 'order-server', 'ips': '172.17.184.139'},
                {'name': 'recharge-server', 'ips': '172.17.184.139'},
                {'name': 'payment-server', 'ips': '172.17.184.139'},
                {'name': 'gas-station-server', 'ips': '172.17.184.139'},
                {'name': 'member-server', 'ips': '172.17.184.139'},
                {'name': 'invoicing-server', 'ips': '172.17.184.139'},
                {'name': 'report-server', 'ips': '172.17.184.139'},
                {'name': 'number-server', 'ips': '172.17.184.139'},
                {'name': 'aggregation-server', 'ips': '172.17.184.140'},
                {'name': 'open-platform-server', 'ips': '172.17.184.140'},
                {'name': 'export-server', 'ips': '172.17.184.140'},
                {'name': 'interface-server', 'ips': '172.17.184.140'},
                {'name': 'oil-invoicing-server', 'ips': '172.17.184.140'},
                {'name': 'online-mall-server', 'ips': '172.17.184.140'},
                {'name': 'online-server', 'ips': '172.17.184.140'},
            ],
            ips: [],
            ip: null,
            name: null
        },
        created: function() {
            // this.getFiles();
        },
        methods: {
            indexSelect: function(event) {
                this.ips = []; this.ip = null;
                console.log(event.target.value)
                const obj = event.target.value.split('|')
                this.name = obj[1];
                const ip = obj[0].split(',');
                for (let i=0; i < ip.length; i++) {
                    console.log()
                    this.ips.push(ip[i]);
                }
            },
            getFiles: function () {
                console.log(this.name +'   '+ this.ip)
                this.logs = [];
                this.logs.push('查询中，请稍后……')
                axios.get(`http://${window.location.host}/logs/files/${this.name}/${this.ip}`)
                    .then(res => {
                        this.logs = res.data;
                        console.log(res.data)
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            getLog: function (fileName) {
                console.log(fileName,this.name, this.ip)
                window.open(`http://${window.location.host}/logs/download/${fileName}/${this.name}/${this.ip}`, '_blank')
            }
        },
        computed: {
            selection: {
                get: function () {

                }
            }
        }
    })
</script>
</body>
</html>